<template>
    <div class="security-list">
        <div class="security-list-li" v-for="(item, index) in Data.list" :key="index">
            <div class="security-list-li-left">{{ item.name }}</div>
            <div class="security-list-li-right"></div>
        </div>
    </div>
</template>

<script setup>

import API from '@/api'
import { ref,reactive, onBeforeMount } from 'vue'
import { useRoute, useRouter } from "vue-router";
const VueRoute = useRoute();
const PageQuery = ref(null)
onBeforeMount(() => {
    let Route = VueRoute
    let Query = Route.query
    PageQuery.value = Query
})
const Data = reactive({
    list: [
        {
            name: "密钥管理",
            value: ""
        },
        {
            name: "绑定邮箱",
            value: ""
        }
    ]
})




</script>


<style lang="scss" scoped>
.security-list {

    display: flex;
    flex-direction: column;
    padding: 10px;

    font-size: 10px;

    &-li {

        padding: 10px;
        width: 100%;
        height: 110px;
        border-bottom: 1px solid #c3c3c344;

        &-left,
        &-right {
            height: 100%;
        }

        &-left {
            width: 70%
        }

        &-right {
            flex: 1;
        }

    }


}
</style>